<template>
  <div id="main" class="main"></div>
</template>
<script lang="ts" setup>
  import * as echarts from 'echarts';
  import { onMounted, onBeforeUnmount } from 'vue';

  // 初始化图表
  type EChartsOption = echarts.EChartsOption;
  // 渲染图表
  const renderCharts = () => {
    let chartDom = document.getElementById('main')!;
    const myChart = echarts.init(chartDom);
    let option: EChartsOption = {
      title: {
        text: '图文档类型',
        left: 'center',
      },
      tooltip: {
        trigger: 'item',
      },
      legend: {
        orient: 'horizontal',
        itemGap: 20,
        bottom: '10%',
      },
      series: [
        {
          name: '图文档类型',
          type: 'pie',
          radius: '50%',
          data: [
            { value: 1048, name: 'PDF' },
            { value: 735, name: 'WORD' },
            { value: 580, name: 'EXCEL' },
            { value: 484, name: 'PPT' },
            { value: 300, name: 'TXT' },
          ],
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)',
            },
          },
        },
      ],
    };
    // 使用刚指定的配置项和数据显示图表。
    option && myChart.setOption(option);
    myChart.resize();
  };
  onMounted(() => {
    window.addEventListener('resize', renderCharts);
    renderCharts();
  });
  onBeforeUnmount(() => {
    window.addEventListener('resize', renderCharts);
  });
</script>
<style lang="less" scoped>
  .main {
    width: 100%;
    height: 100%;
  }
</style>
